<template>
  <swiper
    navigation
    :space-between="50"
    :modules="modules"
    :autoplay="swiperOptions.autoplay"
    :pagination="swiperOptions.pagination"
  >
    <swiper-slide
      v-for="item in modelValue"
      :key="item.t_banner_pk ? item.t_banner_pk : item.t_content_pk"
    >
      <img
        :src="item.banner_img ? item.banner_img : item.image_path"
        class="swiper-img"
      />
      <p class="title" :title="item.title" v-if="item.title">
        {{ item.title }}
      </p>
    </swiper-slide>
  </swiper>
</template>

<script>
// 基础样式
import "swiper/css";

// 模块样式
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/controller";
import "swiper/css/autoplay";

// 或者导入综合的样式
// import "swiper/css/bundle";

import { Pagination, Autoplay, Controller, Navigation } from "swiper";

import { Swiper, SwiperSlide } from "swiper/vue";

export default {
  name: "HeaderSwiper",
  components: {
    Swiper,
    SwiperSlide,
  },
  props: {
    modelValue: {
      type: Array,
    },
  },
  data() {
    return {
      // 使用分页、自动播放、控制器
      modules: [Pagination, Autoplay, Controller, Navigation],
      swiperOptions: {
        // 自动播放设置参数
        autoplay: {
          // 自动播放延迟
          delay: 3000,
          // 如果鼠标进入后是否停止
          pauseOnMouseEnter: true,
          // 如果停止后是否结束自动播放
          disableOnInteraction: false,
        },
        // 分页条设置参数
        pagination: {
          // 是否可以点击
          clickable: true,
          // 按钮激活时的class
          bulletActiveClass: "active-class",
          // 按钮的class
          bulletClass: "bullet-class",
        },
      },
    };
  },
};
</script>

<style scoped>
.swiper-img {
  height: 100%;
  width: 100%;
}
</style>

<style>
.bullet-class {
  display: inline-block;
  width: 20px;
  height: 10px;
  margin: 0px 5px;
  border-radius: 5px;
  background-color: #acacac;
}

.active-class {
  background-color: var(--base-color);
}

.title {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  padding: 5px;
  background-color: #abababab;
  height: 30px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>